<template>
	<view>
		<view class="student">
			<view class="student-item" v-for="item in studentList" :key="item.id">
				<view class="student-item-image">
					<image :src="item.image"></image>
				</view>
				<view class="student-item-info">
					<view class="student-item-name">
						{{ item.userName }}
					</view>
					<view class="student-item-phone">
						{{ item.phone }}
					</view>
				</view>
				<view class="button" v-if="item.status === 1" @click="absence(item.id, item.status)">
					已到
				</view>
				<view class="button1" v-else-if="item.status === 2" @click="absence(item.id, item.status)">
					未到
				</view>
				<view v-else class="button2" @click="absence(item.id, item.status)">
					待签到
				</view>
			</view>
		</view>
		<view class="nomore">
			暂无更多数据
		</view>
	</view>
</template>

<script>
	import { getStudentByClassId } from '../../api/class';
	import { userAttendance } from '../../api/user';
	import { baseUrl } from '../../config';

	export default {
		data() {
			return {
				studentList: [],
				classId: ""
			};
		},
		methods: {
			absence(id, status) {
				console.log(this.classId);
				const _this = this;
				const classId = this.classId;
				if (status === 1) {
					uni.showModal({
						title: "会员是否缺勤",
						success(result) {
							if (result.confirm) {
								userAttendance(classId, id, 2).then(() => {
									_this.refreshStudentList();
								});
							}
						}
					});
				} else {
					uni.showModal({
						title: "会员是否已到",
						success(result) {
							if (result.confirm) {
								userAttendance(classId, id, 1).then(() => {
									_this.refreshStudentList();
								});
							}
						}
					});
				}
			},
			refreshStudentList() {
				getStudentByClassId(this.classId).then(res => {
					console.log(res);
					if (res.data && res.data.data) {
						res.data.data.forEach(student => {
							student.image = baseUrl + "/common/download?name=" + student.image;
						});
						this.studentList = res.data.data;
						console.log("学生列表: ", this.studentList); // 检查数据是否已正确赋值
					} else {
						console.error("未找到数据");
					}
				}).catch(err => {
					console.error("获取学生数据失败: ", err); // 捕捉并打印错误信息
				});
			}
		},
		onLoad(options) {
			console.log(options.id);
			this.classId = options.id;
			this.refreshStudentList(); // 使用新方法获取学生列表
		}
	}
</script>

<style>
	.student-item {
		display: flex;
		border: 2px dashed black;
		height: 12vh;
		padding: 2vh;
	}

	.student-item-image {
		flex: 0 0 12vh;
	}

	.student-item-image image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.student-item-info {
		flex: 1;
		padding: 3vh;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.student-item-name {}

	.student-item-phone {}

	.button {
		flex: 0 0 12vh;
		color: white;
		text-align: center;
		line-height: 6vh;
		height: 6vh;
		font-size: 3vh;
		border-radius: 4vh;
		background-color: #666;
		margin: auto;
	}

	.button1 {
		flex: 0 0 12vh;
		color: white;
		text-align: center;
		line-height: 6vh;
		height: 6vh;
		font-size: 3vh;
		border-radius: 4vh;
		background-color: darkred;
		margin: auto;
	}

	.button2 {
		flex: 0 0 12vh;
		color: white;
		text-align: center;
		line-height: 6vh;
		height: 6vh;
		font-size: 3vh;
		border-radius: 4vh;
		background-color: #666;
		margin: auto;
	}

	.nomore {
		text-align: center;
		background-color: white;
		height: 4vh;
		line-height: 4vh;
	}
</style>
